import React, { PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Tabs, Row, Col, Button} from 'antd';
import QueueAnim from 'rc-queue-anim';

import './less/problem.less';

import ProblemList from './ProblemList';
import ProblemReply from './ProblemReply';

class Problem extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      isList: true,
      activeStudent: []
    };
  }

  componentDidMount() {
    let data = [];
    for(let i = 0; i < 20; i++) {
      data.push({src:"http://img.wzfzl.cn/uploads/allimg/161010/3-161010023233.jpg", name:'王远正'})
    }
    this.setState({
      activeStudent: data
    });
  }

  _changeList() {
    if(this.state.isList) {
      this.setState({
        isList: false
      });
    } else {
      this.setState({
        isList: true
      });
    }
  }

  _renderActive() {
    let _list = [];
    this.state.activeStudent.map((ele, index) => {
      _list.push(
        <li key={'active' + index}>
          <img src={ele.src} />
          <p>{ele.name}</p>
        </li>
      );
    });
    return _list;
  }

  render() {
    let _content = this.state.isList ? [
      <Row key="list">
        <Col span={14} style={{backgroundColor:'#fff'}}>
          <ProblemList changeList={() => this._changeList()} />
        </Col>
        <Col span={10} style={{paddingLeft:20}}>
          <Card title="活跃学员" className="activeStudent">
            <ul>
              {this._renderActive()}
            </ul>
          </Card>
        </Col>
      </Row>
    ] : [
      <Row  key="reply">
        <Col span={14} style={{backgroundColor:'#fff'}}>
          <ProblemReply changeList={() => this._changeList()} />
        </Col>
        <Col span={10} style={{paddingLeft:20}}>
          <Card title="活跃学员" className="activeStudent">
            <ul>
              {this._renderActive()}
            </ul>
          </Card>
        </Col>
      </Row>
    ]

    return(
      <QueueAnim
        key="demo"
        type={['left', 'right']}
        ease={['easeOutQuart', 'easeInOutQuart']} >
        {_content}
      </QueueAnim>
    );
  }
}

function mapStateToProps({ charge }) {
  return { charge };
}

export default connect(mapStateToProps)(Problem);
